<!--
 * @Author: your name
 * @Date: 2020-10-15 17:32:38
 * @LastEditTime: 2020-10-16 09:11:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\print\print.vue
-->
<template>
<div>
<!-- <div  class="print_wrap">
	打印内容
	<div class="no-print">不要打印我</div>
</div> -->
<table ref="print" id="print">
    <tr>
        <th>收款收据</th>
    </tr>
    <tr>
        <td>编号</td>
        <td>1101</td>
    </tr>
</table>
<van-button @click.stop="toPrint">打印</van-button>
</div>
</template>

<script>
import print from 'print-js'
import 'print-js/dist/print.css'
export default {
    methods:{
        toPrint(){
            print({ printable: 'print', type: 'html', scanStyles: false, css: '/print.css',header: '这是标题内容' })
            // console.log("printJS",printJS);
        }
    }
}
</script>

<style lang="less" scoped>
.print_wrap{
    width: 300px;
    height: 400px;
    background-color: red;
}
.no-print{
    width: 100px;
    height: 100px;
    background-color: blue;
}
</style>